<template>
<div>
  <div class="content">
    <!-- 顶部 -->
    <div class="header">
      <div class="login-c">
        <img src="../../static/back.png" class="login-back" @click="back"/>
      </div>
      <!-- 头像展示区 -->
      <div class="users">
        <div
          v-for="(e, index) in users"
          :key="index"
          class="user-l"
          @click="otoChat(index)"
        >
        <!-- 调用一对一聊天函数 -->
          <div class="tip" v-if="e.tip"></div>
          <img :src="require('../../static/images/' + e.img + '.png')" />
        </div>
      </div>
    </div>
    <!-- 内容区 -->
    <div class="main">
      <div class="minimain">
        <div v-for="(e, index) in chat" :key="index">
          <div class="left msg" v-if="e.id == 1">
            <img :src="require('../../static/images/' + e.img + '.png')" />
            <div class="nr">
              <div class="neir">
                {{ e.neir }}
              </div>
              <div class="nt">{{ e.name }} {{ timeDetia(e.time) }}</div>
            </div>
          </div>
          <div class="right msg" v-if="e.id == 2">
            <img :src="require('../../static/images/' + e.img + '.png')" />
            <div class="nr">
              <div class="neir">
                {{ e.neir }}
              </div>
              <div class="nt">{{ timeDetia(e.time) }}</div>
            </div>
          </div>
          <div class="center" v-if="e.id == 3">
            <div class="inner">{{ e.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="send">
      <textarea
        type="text"
        confirm-type="send"
        class="chat-send"
        v-model="chatm"
        auto-height="true"
        show-confirm-bar="false"
        maxlength="-1"
      />
      <!-- 调用发送消息函数 -->
      <img src="../../static/send.png" mode="aspectFit" @click="sendMsg" />
    </div>

    <!-- 一对一聊天 -->
    <transition name="el-zoom-in-bottom">
         <div v-show="show2" class="transition-box">
    <div class="modify">
			<div class="u-name">
				{{uname}}
			</div>
			<div class="modfiy-mian">
				<div v-for="(e,index) in otochat" :key="index">
					<div class="left msg" v-if="e.fid == fid">
						<img :src="require('../../static/images/'+e.img+'.png')">
						<div class="nr">
							<div class="neir">
								{{e.neir}}
							</div>
							<div class="nt">{{timeDetia(e.time)}}</div>
						</div>
					</div>
					<div class="right msg" v-if="e.fid==uid && e.tid == fid">
						<img :src="require('../../static/images/'+e.img+'.png')">
						<div class="nr">
							<div class="neir">
								{{e.neir}}
							</div>
							<div class="nt">{{timeDetia(e.time)}}</div>
						</div>					
					</div>
					<div class="center" v-if="e.id==3">
						<div class="inner">{{e.name}}</div>				
					</div>
				</div>	
			</div>
		</div>
         </div>
        </transition>
        <!-- 调用退出一对一聊天 ！！！！-->
        <div class="bg" @click="outotoChat" v-show="show2"></div>
  </div>
  <div class="img">
  <img src="../../static/bbg.png" alt="" class="fool">
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chatm: "", //消息内容
      name: "", //用户名称
      uname: "",
      fid: "",
      uid: "",
      img: "", //用户头像
      chat: [], //聊天内容
      member: 0, //成员个数
      show2:false,
      users: [],
      users1: [
        {
          name: "小明",
          img: "a",
          tip: true,
          id: "a",
        },
        {
          name: "小花",
          img: "b",
          tip: false,
          id: "b",
        },
        {
          name: "小天",
          img: "c",
          tip: false,
          id: "c",
        },
        {
          name: "小花",
          img: "b",
          tip: true,
          id: "b",
        },
        {
          name: "小天",
          img: "c",
          tip: false,
          id: "c",
        },
        {
          name: "小花",
          img: "b",
          tip: false,
          id: "b",
        },
        {
          name: "小天",
          img: "c",
          tip: false,
          id: "c",
        },
        {
          name: "小花",
          img: "b",
          tip: false,
          id: "b",
        },
        {
          name: "小天",
          img: "c",
          tip: false,
          id: "c",
        },
      ],
      otochat: [],
    };
  },
  methods: {
    timeDetia(date) {
      var time;
      var d = new Date(date);
      var n = new Date();
      //获取时间戳
      var dd = d.getTime();
      var h = d.getHours();
      var m = d.getMinutes();
      var Y = d.getFullYear();
      var M = d.getMonth() + 1;
      var D = d.getDate();
      //现在时间
      var nn = n.getTime();
      var hh = n.getHours();
      var mm = n.getMinutes();
      var YY = n.getFullYear();
      var MM = n.getMonth() + 1;
      var DD = n.getDate();

      if (D == DD && M == MM && Y == YY) {
        if (h < 10) {
          h = "0" + h;
        }
        if (m < 10) {
          m = "0" + m;
        }
        time = h + ":" + m;
        return time;
      } else if (D + 1 == DD && M == MM && Y == YY) {
        if (h < 10) {
          h = "0" + h;
        }
        if (m < 10) {
          m = "0" + m;
        }
        time = "昨天" + " " + h + ":" + m;
        return time;
      } else {
        if (M < 10) {
          M = "0" + M;
        }
        if (D < 10) {
          D = "0" + D;
        }
        if (h < 10) {
          h = "0" + h;
        }
        if (m < 10) {
          m = "0" + m;
        }
        time = Y + "年" + M + "月" + D + "日" + " " + h + ":" + m;
        return time;
      }
    },
    //发送消息
			sendMsg(){
				if(this.chatm.length>0 && this.fid == ''){
					let onemsg = {
						neir:this.chatm,
						img:this.img,
						time:new Date(),
						id:2,
					}
					let data = {
            type:'chat',
						neir:this.chatm,
						img:this.img,
						name:this.name,
						time:new Date(),
						id:1,
					}
					this.chat.push(onemsg);
          this.chatm = '';//清空
					this.ws.send(JSON.stringify(data));
          }else if(this.chatm.length>0 && this.fid != ''){
					//一对一聊天
					let onemsg = {
						neir:this.chatm,
						img:this.img,
						time:new Date(),
						fid:this.uid,
						tid:this.fid,
					}
					let data = {
            type:'chat',
						neir:this.chatm,
						img:this.img,
						name:this.name,
						time:new Date(),
						fid: this.uid,
						tid: this.fid,
					}
					this.otochat.push(onemsg);
          this.chatm = '';//清空
          console.log(this.otochat);
					this.ws.send(JSON.stringify(data));
				}		
            },
            //加入群
			join: function(name,img){
      let data={
        type:'setName',
        name:name,
        img:img
      }
      this.ws.send(JSON.stringify(data))
			},
			//欢迎加入群
			welcome: function(){
				//获取即时信息渲染
        this.ws.onmessage=(e)=>{
          let data=JSON.parse(e.data)
          if(data.type=='serverInformation'){
            let wel = {
						name:data.message,
						id:3,
					}
          this.chat.push(wel);
          }else if(data.type=='chatterList'){
					this.users = data.list;
					console.log(123,this.users)
          }else if(data.type=='chat'){
            let flag=0
            this.chat.map((item,index)=>{
              if(item.id==2 && item.neir==data.data.neir){
                flag=1
              }
            })
            if(flag==0){
              this.chat.push(data.data)
            }
          }
        }
			},
			//获取自己
			myself: function(){
				//获取即时信息渲染
				this.socket.on('myself', (name,users,id) => {
					// console.log(data)
					// console.log('数字'+len)
					//插入欢迎信息
					this.uid = id;
					console.log(this.uid);
					let wel = {
						name:'欢迎 '+name+' 加入群聊',
						id:3,
					}
					this.chat.push(wel);
					for(var i=0;i<users.length;i++){
						if(users[i].id == this.uid){
							users.splice(i,1);
						}
					}
					this.users = users;
					console.log(this.users)
				})
			},
			//退出群提醒
			quit: function(){
				//获取即时信息渲染
				this.socket.on('quit', (data,len) => {
					//插入退出信息
					let wel = {
						name:data+' 退出群聊',
						id:3,
					}
					this.chat.push(wel);
					//this.member = len;
					this.users = users;
				})
			},
			//获取消息
			receiveMsg: function(){
				//获取即时信息渲染
				this.socket.on('sendMsg', data => {
					this.chat.push(data);
				})
			},
			//获取一对一消息
			getmsg: function(){
				this.socket.on('sMsg', data => {
					let fid = data.fid;
					if(this.fid !=fid){
						for(var i=0;i<this.users.length;i++){
							if(this.users[i].id == fid){
								this.users[i].tip = true;
							}
						}
					}
					//console.log(data);
					this.otochat.push(data);
				})
			},
			//进入一对一聊天
			otoChat: function(e){
                console.log(e);
				//获取信息
				this.uname = this.users[e].name;
				this.fid = this.users[e].id;
				this.users[e].tip = false;
				this.modify();
			},
			//退出一对一聊天
			outotoChat: function(){
				this.uname = '';
				this.fid = '';
				this.modify();
			},
			//一对一动画
			modify: function(){
				this.show2 = !this.show2;
      },
      back(){
        this.$router.push({ path: '/'})
      }
  },
  mounted(ev){
    console.log();
      // let e=JSON.parse(localStorage.getItem('user'))
      this.name = this.$route.query.name;
			this.img = this.$route.query.img;
			this.join(this.name,this.img);
			this.welcome();
			// this.myself();
			// this.receiveMsg();
			// this.getmsg();
			// this.quit();
  }
};
</script>

<style scoped>
/* body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  text-align: center;
  overflow: hidden;
} */
*{
  text-align: center;
}
.content {
  width: 375px;
  height: 667px;
  display: grid;
  grid-template-rows: 88px 1fr 80px;
  grid-template-columns: 100%;
  box-sizing: border-box;
  border: 5px solid #fff;
  float: left;
}
.img{
  float: right;
  height: 667px;
}
.img .fool{
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.header {
  left: 0;
  width: 100%;
  height: 88px;
  display: flex;
  /* overflow: hidden;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  z-index: 998; */
  color: #272832;
  -webkit-transition-property: all;
  transition-property: all;
  background: rgba(255, 255, 255, 0.96);
}
.login-c {
  width: 60px;
  height: 60px;
  padding-top: 10px;
  padding-left: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-back {
  width: 20px;
  height: 34px;
}
.users {
  width: 84%;
  display: flex;
}
.user-l {
  padding: 12px 8px;
  position: relative;
}
.user-l img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.user-l .tip {
  width: 14px;
  height: 14px;
  background: rgba(255, 77, 60, 1);
  position: absolute;
  top: 12px;
  right: 10px;
  border-radius: 50%;
  z-index: 10;
}
.main{
    overflow: scroll;
}
.minimain{
  padding-bottom: 100px;
}
.minimain .msg {
  display: flex;
  align-items: flex-end;
  padding: 40px 0;
}
.minimain .msg img {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 18px;
}
.minimain .msg .nr{
    position: relative;
}
.minimain .msg .nr .neir {
  max-width: 380px;
  padding: 26px 32px;
  min-height: 48px;
  font-size: 28px;
  color: rgba(25, 29, 35, 1);
  line-height: 40px;
}
.minimain .msg .nr .nt {
  padding-top: 8px;
  position: absolute;
  font-size: 24px;
  color: rgba(25, 29, 35, 0.5);
  line-height: 34px;
}
.minimain .left {
  flex-direction: row;
}
.minimain .left .neir {
  background: rgba(244, 244, 244, 1);
  border-radius: 24px 24px 24px 0px;
}
.minimain .right {
  flex-direction: row-reverse;
}
.minimain .right .neir {
  background: rgba(255, 234, 222, 1);
  border-radius: 24px 24px 0px 24px;
}
.minimain .right .nt {
  right: 132px;
}
.minimain .center {
  text-align: center;
  padding: 32px 0 20px;
}
.minimain .center.inner {
  font-size: 24px;
  display: inline-block;
  color: rgba(25, 29, 35, 0.5);
  line-height: 34px;
}
.send {
  /* position: fixed; */
  z-index: 1002;
  bottom: 0;
  width: 100%;
  padding-bottom: var(--status-bar-height);
  height: 80px;
  background: rgba(255, 255, 255, 0.96);
  display: flex;
  position: relative;
}
.send .chat-send {
  margin: 12px 48px;
  flex: 1;
  width: 100%;
  min-height: 40px;
  background: rgba(242, 242, 242, 1);
  border-radius: 24px;
  font-size: 28px;
  color: rgba(25, 29, 35, 1);
  line-height: 40px;
  outline: none;
}
.send img {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 8px; 
  top: 22px;
}
.transition-box {
  width: 100%;
  height: 55%;
  border-radius: 4px;
  background-color: #fff;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  z-index: 1000;
  left: 0;
  bottom: 0;
  position: fixed;
}
	.modify{
		position: fixed;
		overflow: hidden;
		left: 0;
		bottom:-90%;
		width: 100%;
		height: 90%;
		z-index: 1000;
		background: #fff;
		border-radius:48rpx 48rpx 0px 0px;
	}
	.u-name{
		position: absolute;
		top: 0;
		background-color: #fff;
		height: 80rpx;
		text-align: center;
		width: 100%;
		line-height: 80rpx;
	}
	.modfiy-mian{
		/* padding: 88rpx 28rpx 120rpx; */
		box-sizing: border-box;
		height: 100%;
	}
	.bg{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: rgba(0,0,0,0.4);
	}
</style>
